<template>
	<el-container class="container">
		<el-main class="content">
			<img class="back" src="./img/icon_arrow_left.png" @click="$router.replace('/list/:cid')" />
			<div class="banner">
				<ul class="iconlogo">
					<li>
						<img :src="avatar.avatar" alt="">
					</li>
				</ul>
			</div>
			<div class="title">
				<div>
					<span class="title-mark">￥</span>
					<span class="title-price">{{ avatar.price }}</span>
				</div>
				<img src="./img/icon_product_unfavor.png" alt="" class="product" />
			</div>
			<div class="cont-brief">
				<div>
					<img src="./img/tag_self_new.png" alt="" style="width: 51px" />
					<span class="headinng">{{ avatar.name }}</span>
				</div>
				<span class="brief">{{ avatar.brief }}</span>
				<p style="color: rgb(133, 133, 133); font-size: 13px">
					小米电视选购指南<span
						style="color: rgb(153, 98, 26); font-size: 13px; line-height: 21px">至高24期免息,总有一款适合你>>></span>
				</p>
			</div>
			<div class="poster">
				<img src="./img/lingqv.png" alt="" style="width: 100%" />
			</div>
			<span style="
          background-color: white;
          line-height: 40px;
          color: rgb(188, 124, 0);
          font-size: 14px;
          font-weight: bold;
          text-align: center;
        ">商品介绍图</span>
			<div>
				<img :src="otherImgs[0]" alt="" width="100%" />
				<img :src="otherImgs[1]" alt="" width="100%" />
				<img :src="otherImgs[2]" alt="" width="100%" />
				<img :src="otherImgs[3]" alt="" width="100%" />
				<img :src="otherImgs[4]" alt="" width="100%" />
				<img :src="otherImgs[5]" alt="" width="100%" />
				<img :src="otherImgs[6]" alt="" width="100%" />
				<img :src="otherImgs[7]" alt="" width="100%" />
				<img :src="otherImgs[8]" alt="" width="100%" />
				<img :src="otherImgs[9]" alt="" width="100%" />
			</div>
		</el-main>
		<el-footer class="footer">
			<div class="shop">
				<img src="./img/mi_shop_icon.png" alt="" />
				<span>小米</span>
			</div>
			<div class="shop" @click="$router.push('/cart')">
				<img src="./img/icon_shop_cart.png" alt="" />
				<span>购物车</span>
			</div>
			<div class="pay">
				<div class="left" @click="addList({ id, count })">
					<span>加入购物车</span>
				</div>
				<div class="right">
					<span>立即购买</span>
				</div>
			</div>
		</el-footer>
	</el-container>
</template>

<script>
import { CartApi, ProductApi, DetailsApi } from "../../api";

export default {
	name: "Detail",
	data() {
		return {
			search: {
				name: "",
				cid: parseInt(this.$route.params.params),
				orderCol: "price",
				orderDir: "asc",
				begin: 0,
				pageSize: 17
			},
			listModel: [],
			id: 1,
			count: 1,
			bannerImgs: [],
			otherImgs: [],
			activeId: 1,
			avatar: []
		};
	},
	created() {
		this.activeId = this.$route.params.cid;
		this.getData();
		this.getdata();
	},

	methods: {
		async getData() {
			try {
				this.listModel = await DetailsApi.getMode(1); //获取当前id
				console.log(this.listModel)
			} catch (e) {
				/**/
			}
			this.otherImgs = this.listModel.otherImgs.split(",");

		},
		async getdata() {
			try {
				this.listModel = await ProductApi.getList(this.search);
				console.log(this.listModel)
				this.avatar = this.activeId > 0 ? this.listModel.find(item => item.id === parseInt(this.activeId)) : "";
				console.log(this.avatar)
			} catch (e) {/**/ }
		},
		async addList({ activeId, count }) {
			try {
				await this.$miConfirm("当前商品是否加入购物车?");
				console.log(activeId)
				const pid = this.activeId;
				await CartApi.add({ pid, count });
				this.$router.push('/cart')
			} catch (e) {/**/ }
		},

	},
};
</script>

<style scoped>
* {
	padding: 0;
	margin: 0;
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.content {
	flex-grow: 1;
	overflow: auto;
}

.back {
	width: 32px;
	height: 32px;
	position: absolute;
	top: 4px;
	left: 11px;
	z-index: 999;
}

.banner {
	background-color: black;
}

.dialog-mask {
	z-index: 999;
}

.el-carousel__item img {
	width: 100%;
	height: 100%;
}

.title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-top: 9px;
	padding-left: 12px;
	padding-right: 5px;
	background: white;
}

.title-mark {
	color: rgb(153, 98, 26);
	font-size: 16px;
	font-weight: 500;
	position: relative;
	top: -2px;
}

.title-price {
	color: rgb(153, 98, 26);
	font-size: 26px;
	font-weight: 500;
	margin-left: 2px;
}

.product {
	width: 40px;
}

.headinng {
	color: rgb(51, 51, 51);
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
}

.cont-brief {
	display: flex;
	flex-direction: column;
	padding-top: 10px;
	padding-left: 12px;
	padding-right: 5px;
	background: white;
}

.brief {
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
	padding-left: 2px;
}

.cont-brief div:first-child {
	display: flex;
	align-items: center;
}

.poster {
	margin-top: 10px;
	height: 41.6667px;
	width: 375px;
}

.footer {
	flex-shrink: 0;
	height: 53px;
	border-top: 1px solid rgb(237, 237, 237);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.shop {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shop img {
	width: 24px;
	height: 24px;
}

.shop span {
	color: rgb(48, 49, 51);
	font-size: 9px;
	font-weight: bold;
}

.pay {
	display: flex;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
	border-top-color: rgb(237, 237, 237);
	border-top-width: 1px;
	height: 53px;
	justify-content: space-between;
	position: relative;
}

.left {
	background: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
	border-bottom-left-radius: 20px;
	border-top-left-radius: 20px;
	padding: 8px 28px;
}

.left span {
	color: rgb(255, 255, 255);
	font-size: 14px;
	font-weight: bold;
	margin-top: 0px;
	text-align: center;
}

.right {
	background: linear-gradient(to right, rgb(240, 78, 46), rgb(213, 16, 16));
	border-bottom-right-radius: 20px;
	border-top-right-radius: 20px;
	padding: 8px 28px;
}

.right span {
	color: rgb(255, 255, 255);
	font-size: 14px;
	font-weight: bold;
	margin-top: 0px;
	text-align: center;
}

.iconlogo {
	background-color: #ffffff;
}

.iconlogo li img {
	width: 100%;
}
</style>